<template>
	<view class="profile-container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="user-info">
				<image class="avatar" src="/static/avatar-default.png"></image>
				<text class="welcome">个人中心</text>
			</view>
			<view class="setting-icon" @click="goToSettings">⚙️</view>
		</view>

		<!-- 主要内容区 -->
		<scroll-view scroll-y class="main-content">
			<!-- 用户信息卡片 -->
			<view class="user-card">
				<view class="user-card-header">
					<image class="user-avatar" src="/static/avatar-default.png"></image>
					<view class="user-details">
						<text class="user-name">李家属</text>
						<text class="user-role">家属用户</text>
					</view>
					<view class="edit-profile" @click="editProfile">编辑</view>
				</view>
				<view class="user-stats">
					<view class="stat-item">
						<text class="stat-value">12</text>
						<text class="stat-label">记录数</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">5</text>
						<text class="stat-label">收藏数</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">30</text>
						<text class="stat-label">使用天数</text>
					</view>
				</view>
			</view>

			<!-- 患者信息卡片 -->
			<view class="module-section">
				<view class="module-header">
					<text class="module-title">关联患者</text>
					<text class="module-more" @click="managePatients">管理 ></text>
				</view>
				<view class="patient-card">
					<image class="patient-avatar" src="/static/avatar-default.png"></image>
					<view class="patient-info">
						<text class="patient-name">张三</text>
						<text class="patient-relation">父亲</text>
					</view>
					<view class="patient-status stable">状态稳定</view>
				</view>
			</view>

			<!-- 功能模块 -->
			<view class="module-section">
				<view class="module-header">
					<text class="module-title">我的功能</text>
				</view>
				<view class="function-grid">
					<view class="function-item" @click="navigateTo('/pages/family/profile/records')">
						<view class="function-icon">📝</view>
						<text class="function-name">我的记录</text>
					</view>
					<view class="function-item" @click="navigateTo('/pages/family/profile/collections')">
						<view class="function-icon">⭐</view>
						<text class="function-name">我的收藏</text>
					</view>
					<view class="function-item" @click="navigateTo('/pages/family/profile/reminders')">
						<view class="function-icon">⏰</view>
						<text class="function-name">提醒事项</text>
					</view>
					<view class="function-item" @click="navigateTo('/pages/family/profile/feedback')">
						<view class="function-icon">💬</view>
						<text class="function-name">意见反馈</text>
					</view>
				</view>
			</view>

			<!-- 服务模块 -->
			<view class="module-section">
				<view class="module-header">
					<text class="module-title">相关服务</text>
				</view>
				<view class="service-list">
					<view class="service-item" @click="navigateTo('/pages/family/profile/consultation')">
						<view class="service-icon">👨‍⚕️</view>
						<view class="service-info">
							<text class="service-name">专家咨询</text>
							<text class="service-desc">一对一专业指导</text>
						</view>
						<view class="service-arrow">></view>
					</view>
					<view class="service-item" @click="navigateTo('/pages/family/profile/support')">
						<view class="service-icon">🤝</view>
						<view class="service-info">
							<text class="service-name">支持小组</text>
							<text class="service-desc">同路人交流分享</text>
						</view>
						<view class="service-arrow">></view>
					</view>
					<view class="service-item" @click="navigateTo('/pages/family/profile/resources')">
						<view class="service-icon">📚</view>
						<view class="service-info">
							<text class="service-name">资源中心</text>
							<text class="service-desc">专业资料与指南</text>
						</view>
						<view class="service-arrow">></view>
					</view>
				</view>
			</view>

			<!-- 设置模块 -->
			<view class="module-section">
				<view class="module-header">
					<text class="module-title">设置与帮助</text>
				</view>
				<view class="setting-list">
					<view class="setting-item" @click="navigateTo('/pages/family/profile/account')">
						<view class="setting-icon">🔒</view>
						<text class="setting-name">账号与安全</text>
						<view class="setting-arrow">></view>
					</view>
					<view class="setting-item" @click="navigateTo('/pages/family/profile/notification')">
						<view class="setting-icon">🔔</view>
						<text class="setting-name">通知设置</text>
						<view class="setting-arrow">></view>
					</view>
					<view class="setting-item" @click="navigateTo('/pages/family/profile/privacy')">
						<view class="setting-icon">🛡️</view>
						<text class="setting-name">隐私政策</text>
						<view class="setting-arrow">></view>
					</view>
					<view class="setting-item" @click="navigateTo('/pages/family/profile/help')">
						<view class="setting-icon">❓</view>
						<text class="setting-name">帮助中心</text>
						<view class="setting-arrow">></view>
					</view>
					<view class="setting-item" @click="logout">
						<view class="setting-icon logout">🚪</view>
						<text class="setting-name logout">退出登录</text>
						<view class="setting-arrow">></view>
					</view>
				</view>
			</view>

			<!-- 版本信息 -->
			<view class="app-version">
				<text>生命故事盒子 v1.0.0</text>
			</view>
		</scroll-view>

		<!-- 底部导航栏 -->
		<view class="tab-bar">
			<view class="tab-item" @click="navigateTo('/pages/family/index')">
				<view class="tab-icon">🏠</view>
				<text class="tab-text">首页</text>
			</view>
			<view class="tab-item" @click="navigateTo('/pages/family/patientStatus')">
				<view class="tab-icon">📊</view>
				<text class="tab-text">患者状态</text>
			</view>
			<view class="tab-item" @click="navigateTo('/pages/family/aiChat')">
				<view class="tab-icon">💬</view>
				<text class="tab-text">AI对话</text>
			</view>
			<view class="tab-item active">
				<view class="tab-icon">👤</view>
				<text class="tab-text">我的</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			
		}
	},
	methods: {
		navigateTo(url) {
			// 判断是否是底部导航栏的页面
			if (url.includes('/pages/family/index') ||
				url.includes('/pages/family/patientStatus') ||
				url.includes('/pages/family/aiChat') ||
				url.includes('/pages/family/profile')) {
				uni.switchTab({
					url: url
				});
			} else {
				uni.navigateTo({
					url: url
				});
			}
		},
		editProfile() {
			uni.navigateTo({
				url: '/pages/family/profile/edit'
			});
		},
		goToSettings() {
			uni.navigateTo({
				url: '/pages/family/profile/settings'
			});
		},
		managePatients() {
			uni.navigateTo({
				url: '/pages/family/profile/patients'
			});
		},
		logout() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						// 执行退出登录操作
						uni.reLaunch({
							url: '/pages/login/roleSelect'
						});
					}
				}
			});
		}
	}
}
</script>

<style>
.profile-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f5f5f5;
}

/* 导航栏样式 */
.nav-bar {
	padding: 20rpx 30rpx;
	background-color: #52c41a;
	color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.user-info {
	display: flex;
	align-items: center;
}

.avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 40rpx;
	margin-right: 20rpx;
	background-color: #fff;
}

.welcome {
	font-size: 32rpx;
}

.setting-icon {
	font-size: 40rpx;
}

/* 主内容区样式 */
.main-content {
	flex: 1;
	padding: 30rpx;
	overflow-y: auto;
}

/* 用户卡片样式 */
.user-card {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.user-card-header {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
}

.user-avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	margin-right: 20rpx;
}

.user-details {
	flex: 1;
}

.user-name {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
	display: block;
}

.user-role {
	font-size: 28rpx;
	color: #666;
	display: block;
}

.edit-profile {
	padding: 10rpx 30rpx;
	background-color: #f0f0f0;
	border-radius: 30rpx;
	font-size: 26rpx;
	color: #333;
}

.user-stats {
	display: flex;
	justify-content: space-around;
	border-top: 1rpx solid #f0f0f0;
	padding-top: 20rpx;
}

.stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.stat-value {
	font-size: 36rpx;
	font-weight: bold;
	color: #52c41a;
	margin-bottom: 5rpx;
}

.stat-label {
	font-size: 24rpx;
	color: #999;
}

/* 模块通用样式 */
.module-section {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.module-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.module-title {
	font-size: 34rpx;
	font-weight: bold;
	color: #333;
}

.module-more {
	font-size: 26rpx;
	color: #999;
}

/* 患者卡片样式 */
.patient-card {
	display: flex;
	align-items: center;
	padding: 20rpx;
	background-color: #f9f9f9;
	border-radius: 15rpx;
}

.patient-avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 40rpx;
	margin-right: 20rpx;
}

.patient-info {
	flex: 1;
}

.patient-name {
	font-size: 30rpx;
	color: #333;
	display: block;
}

.patient-relation {
	font-size: 24rpx;
	color: #999;
	display: block;
	margin-top: 5rpx;
}

.patient-status {
	padding: 5rpx 15rpx;
	border-radius: 20rpx;
	font-size: 22rpx;
	color: #fff;
}

.stable {
	background-color: #52c41a;
}

.warning {
	background-color: #faad14;
}

.critical {
	background-color: #f5222d;
}

/* 功能网格样式 */
.function-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.function-item {
	width: 22%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 20rpx;
}

.function-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 40rpx;
	background-color: #f0f0f0;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 36rpx;
	margin-bottom: 10rpx;
}

.function-name {
	font-size: 24rpx;
	color: #333;
}

/* 服务列表样式 */
.service-list {
	display: flex;
	flex-direction: column;
}

.service-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.service-item:last-child {
	border-bottom: none;
}

.service-icon {
	font-size: 40rpx;
	margin-right: 20rpx;
}

.service-info {
	flex: 1;
}

.service-name {
	font-size: 30rpx;
	color: #333;
	display: block;
}

.service-desc {
	font-size: 24rpx;
	color: #999;
	display: block;
	margin-top: 5rpx;
}

.service-arrow {
	font-size: 30rpx;
	color: #999;
}

/* 设置列表样式 */
.setting-list {
	display: flex;
	flex-direction: column;
}

.setting-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.setting-item:last-child {
	border-bottom: none;
}

.setting-icon {
	font-size: 36rpx;
	margin-right: 20rpx;
}

.setting-name {
	flex: 1;
	font-size: 30rpx;
	color: #333;
}

.setting-arrow {
	font-size: 30rpx;
	color: #999;
}

.logout {
	color: #f5222d;
}

/* 版本信息样式 */
.app-version {
	text-align: center;
	padding: 30rpx 0;
	font-size: 24rpx;
	color: #999;
}

/* 底部导航栏样式 */
.tab-bar {
	display: flex;
	height: 100rpx;
	background-color: #fff;
	border-top: 1rpx solid #eee;
}

.tab-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.tab-icon {
	font-size: 40rpx;
	margin-bottom: 5rpx;
}

.tab-text {
	font-size: 24rpx;
	color: #999;
}

.tab-item.active .tab-text {
	color: #52c41a;
}
</style>